<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>选择器</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script>
			//1、标签选择器：
			function htmlSelector(){
				//获取所有的div元素（集合）
				var divList=$("div");
				console.log(divList);//jQuery的对象
				console.log(divList.length);
				for(var i=0;i<divList.length;i++){
					console.log(divList[i]);//js的对象
					//将js对象转换为jQuery的对象
					console.log($(divList[i]));
				}
			}
			//2、id选择器
			function idSelector(){
				//根据id获取到的元素是惟一的，即使页面上有重名的id，获取的是第一个
				var p=$("#p1");
				console.log(p.html());
			}
			//3、.class选择器
			function classSelector(){
				var list=$(".mydiv");
				console.log(list.length);
			}
			//4、 全局选择器
			function allSelector(){
				var list=$("*");//包括了html、head、title.....所有标签
				console.log(list.length);
				for(var i=0;i<list.length;i++){
					console.log(list[i]);//js的对象
				}
			}
			//5、并集选择器
			function andSelector(){
				var list=$(".mydiv,p,li");
				printList(list);
			}
			//6、后代选择器:包括所有的后代，儿子和孙子辈都有
			function subSelector(){
				var list=$("form input");
				printList(list);
			}
			//7、子选择器：只有子元素
			function sunSelector(){
				var list=$("form>input");
				printList(list);
			}
			//8、相邻选择器
			function nextSelector(){
				var list=$("label + input");
				printList(list);
			}
			//9、同辈选择器
			function sublingsSelector(){
				var list=$("form ~ div");
				printList(list);
			}
			//10、属性选择器
			function attrSelector(){
				var list=$("div[id]");//获取所有有id属性的div的元素集合
				list=$("div[class]");//获取所有有class属性的div的元素集合
				list=$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合
				list=$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合
				list=$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合
				list=$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合
				list=$("input[id][name^='user']");//获取所有input标签中既有id属性又有name属性以user开头的元素的集合
				printList(list);
			}
			//11、可见性选择器
			function seeSelector(){
				//匹配所有的可见div元素
				var list=$("div:visible");
				//匹配所有的不可见div元素
				var list=$("div:hidden");
				//匹配所有的不可见input元素,样式有display：none的元素和type=hidden的元素
				list=$("input:hidden");
				printList(list);
			}
			//文档就绪事件：页面加载完毕之后执行：
			$(function(){
				seeSelector();
			});
			//打印集合
			function printList(list){
				for(var i=0;i<list.length;i++){
					console.log(list[i]);
					console.log(list[i].innerHTML);//非表单项元素使用该种方式输出
					console.log(list[i].value);//只有表单项元素才有value
				}
			}
		</script>
	</head>
<body>
	<form>
		<label>用户名：</label>
		<input type="hidden" name="userId" value="1001" />
		<input style="display: none;" value="隐藏的input" />
		<input id="userName" name="userName" value="jiaobaoyu" /><br />
		<label>密码：</label>
		<input name="userPass" type="password" value="1234567"/><br />
		<fieldset>
			电话：<input id="phone" name="phoneuser" value="13712345789"/><br/>
			邮箱：<input name="emailuser" type="email" value="lina@sina.com"/>
		</fieldset>
	</form>
	地址：<input name="addressuser1" value="北京" /><br />
	<ul>
		<li>li111111</li>
		<li>li111111</li>
		<li>li111111</li>
	</ul>
	<p id="p1">p111111111111</p>
	<div id="div1" class="mydiv" style="display: none;" >div1</div>
	<div class="mydiv">div2</div>
	<div id="div3">div3</div>
</body>
</html>